<template>
  <div id="add">
    <div class="form_box">
      <img
        v-if="addtype"
        class="title_imgs"
        src="../../../assets/images/organization/bianji.png"
        alt=""
      />
      <img
        v-else
        class="title_imgs"
        src="../../../assets/images/organization/xinzeng.png"
        alt=""
      />

      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        size="medium"
        :rules="rules"
      >
        <div class="clearfix title_text">
          <div class="title_box">
            <img
              class="title_img"
              src="../../../assets/images/organization/zz.png"
              alt=""
            />
            <div style="margin-left: 20px">基本信息</div>
          </div>
        </div>
        <el-form-item label="组织名称：" prop="username">
          <el-input
            placeholder="请输入代理商姓名"
            v-model="form.username"
          ></el-input>
        </el-form-item>

        <el-form-item label="功能权限：" prop="authority">
          <el-cascader
            style="width: 100%"
            v-model="form.authority"
            :options="power"
            :props="{ multiple: true }"
            collapse-tags
            clearable
          ></el-cascader>
        </el-form-item>

        <el-form-item label="数据权限：" prop="datas">
          <el-select v-model="form.datas" placeholder="请选择">
            <el-option label="默认" value="1"> </el-option>
            <el-option label="自定义" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.datas == 2" prop="dataslist">
          <el-cascader
            style="width: 100%"
            v-model="dataslist"
            :options="treeData"
            :props="{ multiple: true }"
            collapse-tags
            clearable
          ></el-cascader>
        </el-form-item>

        <el-form-item label="上级组织：" prop="superior">
          <el-cascader
            style="width: 100%"
            v-model="form.superior"
            :options="treeData"
            :props="{ multiple: true }"
            collapse-tags
            clearable
          ></el-cascader>
        </el-form-item>

        <el-form-item label="其他功能：" prop="elses">
          <!-- <div class="elses"> -->
          <div>
            <el-switch
              v-model="form.elses"
              :active-value="1"
              :inactive-value="2"
            >
            </el-switch>
          </div>
          <div class="elses_text">开关打开后，其他权限由上级组织自定义配置</div>
          <div class="elses_text">开关关闭后，该组织仅拥有基础权限</div>
          <!-- <div style="margin-right: 10px">
              
            </div> -->
          <!-- </div> -->
        </el-form-item>

        <el-form-item label="敏感信息：" prop="sensitive">
          <el-switch
            v-model="form.sensitive"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>

        <el-form-item label="排序:" prop="index">
          <el-input-number
            class="override-input"
            v-model="form.index"
            :min="1"
            :max="10"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div class="button_box">
        <el-button class="btn1" @click="cancel">取消</el-button>
        <el-button class="danger" v-if="addtype" @click="del">删除</el-button>
        <el-button class="button" type="primary" @click="submit"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 区分编辑还是添加
      addtype: "",
      dataslist: [],
      treeData: [
        {
          value: 1,
          label: "一级 1",
          children: [
            {
              value: 4,
              label: "二级 1-1",
              children: [
                {
                  value: 9,
                  label: "三级 1-1-1"
                },
                {
                  value: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        }
      ],
      form: {
        index: "1"
      },
      rules: {
        username: [
          { required: true, message: "请输入组织名称", trigger: "blur" }
        ],
        authority: [
          { required: true, message: "请选择功能权限", trigger: "blur" }
        ],
        datas: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
        superior: [
          { required: true, message: "请选择上级组织", trigger: "blur" }
        ],
        index: [{ required: true, message: "请选择排序", trigger: "blur" }],
        dataslist: [
          { required: true, message: "请选择数据权限", trigger: "blur" }
        ]
      },
      power: [
        {
          value: 1,
          label: "首页",
          children: [
            {
              value: 2,
              label: "数据",
              children: [
                { value: 3, label: "普陀" },
                { value: 4, label: "黄埔" },
                { value: 5, label: "徐汇" }
              ]
            },
            {
              value: 7,
              label: "每日",
              children: [
                { value: 8, label: "南京" },
                { value: 9, label: "苏州" },
                { value: 10, label: "无锡" }
              ]
            },
            {
              value: 12,
              label: "客户",
              children: [
                { value: 13, label: "杭州" },
                { value: 14, label: "宁波" },
                { value: 15, label: "嘉兴" }
              ]
            }
          ]
        },
        {
          value: 17,
          label: "代理商",
          children: [
            {
              value: 18,
              label: "添加代理商",
              children: [
                { value: 19, label: "西安" },
                { value: 20, label: "延安" }
              ]
            },
            {
              value: 21,
              label: "代理商详情",
              children: [
                { value: 22, label: "乌鲁木齐" },
                { value: 23, label: "克拉玛依" }
              ]
            }
          ]
        }
      ]
    }
  },
  mounted () {
    if (this.$route.params.type) {
      this.addtype = this.$route.params.type
    }

    console.log(this.addtype)
  },
  methods: {
    del () {
      this.$confirm("确定删除所选组织层级？", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "error",
        center: true
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!"
        })
      })
    },
    cancel () {
      this.$router.back()
      this.$refs.form.resetFields()
    },
    submit () {
      this.$refs.form.validate(val => {
        if (val) {
          console.log(this.form)
        }
      })
    }
  }
}
</script>

<style scoped>
#add {
  background-color: #fff !important;
  min-height: 100vh;
}
.form_box {
  /* background-image: url("/assets/images/addzzjg.png");
  background-size: 100% 100%; */
}
.danger {
  width: 149px;
  height: 52px;
  border: 1px solid #fd0e0e;
  color: #fd0e0e;
}
.button_box {
  width: 100%;
  margin-top: 100px;
  text-align: center;
  padding: 20px 0px;
  box-shadow: 7px 0px 14px -9px #000;
}
.button {
  padding: 20px 60px;
  background: #3f75ff;
  color: #fff;
  box-shadow: 0px 4px 8px 0px #95b3ff;
  border-radius: 4px 4px 4px 4px;
}
.title_imgs {
  width: 380px;
  height: 310px;
  position: absolute;
  right: 10px;
}
.clearfix {
  padding: 20px;
}
.override-input {
  width: auto !important;
  /* 或者针对宽度使用其它合适的值 */
}
.elses {
  display: flex;
  /* align-items: center; */
}
.elses_text {
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #949191;
  /* display: inline-block; */
}
/deep/ .el-input {
  width: 440px;
}
.title_box {
  display: flex;
  align-items: center;
}
.title_img {
  width: 40px;
  height: 40px;
}
.btn1 {
  padding: 20px 60px;
  background-color: #fff;
  border: 1px solid #3f75ff;
}
</style>
